<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Login</title>
<link rel="stylesheet" href="css/loginstyle.css" type="text/css">
<script type="text/javascript" src="js/jquery-latest.js"></script>

<script type="text/javascript">
	$(document).ready(function(){
		$("username").focus();
	});
	function validate() {
		if (document.getElementById("username").value == "") {
			document.getElementById("error").innerHTML = "Please enter the Username.";
			document.getElementById("username").focus();
			return false;
		}
		if (document.getElementById("password").value == "") {
			document.getElementById("error").innerHTML = "Please enter the Password.";
			document.getElementById("password").focus();
			return false;
		}
		return true;
	}
	
	function mylogin(){
		if(validate()){
			var username = document.getElementById("username").value;
			var password = document.getElementById("password").value;
			$.ajax({
				url : "UserController?action=login&username="+ username
						+ "&password="+ password,
				type : "POST",
				success : function(data) {
					if(data == "Success"){
						window.location = "index.jsp";
					} else {
						document.getElementById("error").innerHTML = data;
					}
				},
				error : function(data) {
					alert("fail");
				}
			});
		}
		
	}
</script>
</head>
<body>
	<% 
	if (session.getAttribute("user") != null) {
	    	response.sendRedirect("index.jsp");
	}
	%>
	<div class="container">
	<div class="login">
		<h1>Login to Web App</h1>
		<div id="login">
			<p><input type="text" id="username" value="" placeholder="Username"></p>
			<p><input type="password" id="password" value=""placeholder="Password"></p>
			<p id="error"></p>
			<p class="submit"><input type="submit" name="commit" value="Login" onclick="mylogin();"></p>
		</div>
	</div>
	<div class="login-help">
		<p>Forgot your password? <a href="RetrievePassword.jsp">Click here to reset it</a>.</p>
	</div>
	</div>
</body>
</html>